<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>JQuery - 5</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <style>
            #accordeon_enveloppe {
                list-style: none;
                width:640px;
                /*margin: 30px 0;*/
                padding: 0;
                height: 200px;
                overflow: hidden;
                background: #7d8d96;
            }
            
            #accordeon_enveloppe li {
                float: left;
                border-left:none;
                display: block;
                height: 200px;
                width: 50px;
                padding-left: 20px;
                overflow: hidden;
                color: #fff;
                text-decoration: none;
                font-size: 16px;
                line-height: 1.5em;
                border-left: 10px solid purple;
            }
            
            /*
            #accordion li.active {
                width: 450px;
            }
            */

        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script>
            $(document).ready(function(){
 
                zoneAccordeon = $("#accordeon_enveloppe li:first");
                /*$(activeItem).addClass('active');*/

                $("#accordeon_enveloppe li").hover(function(){
                    $(zoneAccordeon).animate({width: "50px"}, {duration:300, queue:false});
                    $(this).animate({width: "450px"}, {duration:300, queue:false});
                    zoneAccordeon = this;
                });

            });
        </script>
    </head>
    <body>
        <ol id="accordeon_enveloppe">
            <li style="background-color: activeborder;">
                Partie 1
            </li>
            <li style="background-color: greenyellow;">
                Partie 2
            </li>
            <li style="background-color: pink;">
                Partie 3
            </li>
        </ol>
    </body>
</html>
